<script setup>
import { useI18n } from 'vue-i18n'
import { debounce } from '@/utils/tools'
const { t } = useI18n()

const props = defineProps({
  placeholder: {
    require: false,
    type: String
  },
  width: {
    type: String,
    default: 'auto'
  },
  className: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['valueChange'])

const value = ref('')

watch(value, (newvalue) => {
  debounce(() => {
    emit('valueChange', newvalue)
  }, 500)
})
</script>

<template>
  <n-input
    :style="{ width }"
    :class="className"
    v-model:value="value"
    :placeholder="props.placeholder ? props.placeholder : t('system.search')"
  ></n-input>
</template>

<style scoped></style>
